スマホページの横揺れ と markdownのコード表示のデザインを修正する

Netlify CMS の Gastbyテンプレートで作成したウェブサイトで、少々困ったデザインになってしまったのでそれを直しました。

Tags

ある日、iPhoneで自分のブログを確認していたところ、細かい所ですが少しイラっとくる点に気づきました。

以下の画像を見てください。分かるでしょうか。

右側に僅かですが、謎の余白が生まれてしまっています。

yokoyure Sample


これが原因で横スクロールできてしまい、ガクガクしてしまうときがありました。


　また、markdown のコード表示が非常に見づらいです。

OldCodeSample


これら修正します。

スタイルの追加

　軽く調べたところ、htmlとbodyに overflow: hidden を適用すればいいみたいです。

　なのでLayout.js とall.sass に以下のようなコードを追記しました。

　2019/12/25 追記：コードを見やすくするのには"gatsby-remark-prismjs"を導入するべきです。後日記事にしたいと思います。

▼Layout.js　(Helmetタグ内)

<body className="body" />
<pre className="pre"/>

▼all.sass

.body
  overflow: hidden;

.pre
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  line-height: 19px;
  overflow: auto;
  padding: 6px 10px;
  border-radius: 3px;

修正後

　横揺れがなくなり、コードも見やすくなりました。